<template>
	<el-form size="large" class="register-content-form" label-position="right">
		<div class="select-height register-animation1">
			<el-row>
				<el-col :span="8" class="left"><span></span>店铺体系：</el-col>
				<el-col :span="16"><el-cascader v-model="value" :options="options" :props="props" @change="handleChange"
						clearable placeholder="根据首字母选择" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>店铺名称：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.shopName" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>店铺用账号：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.userName" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>店铺用密码：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.password" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>联系人姓名：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.connectName" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>联系人电话：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.connectPhone" /></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>输入图片验证码：</el-col>
				<el-col :span="7" class="left">
					<el-input v-model="state.shopForm.imgCode" /></el-col>
				<el-col :span="9" class="left img-code" @click="getImgCodeData()">
					<img :src="imgCode" alt="">
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>获取手机验证码：</el-col>
				<el-col :span="7"><el-input v-model="state.shopForm.code" /></el-col>
				<el-col :span="9" class="get-code"><el-button @click="getCodeFun()">{{ msg }}</el-button></el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="left"><span></span>联系人邮箱：</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.userEmail" /></el-col>
			</el-row>
			<!-- <el-row>
				<el-col :span="8" class="left"><span></span>产品介绍:</el-col>
				<el-col :span="16"><el-input v-model="state.shopForm.mark" /></el-col>
			</el-row> -->
		</div>
		<el-form-item class="register-animation2">
			<el-button type="primary" class="register-content-submit" round v-waves @click="onRegister"
				:loading="state.loading.register">
				<span>注册</span>
			</el-button>
		</el-form-item>
	</el-form>
	<div class="register-result" v-show="successShow">
		<div class="title">注册成功</div>
		<div class="title1">恭喜您，注册成功，系统会进行审批，结果会以邮件或电话方式通知，请留意相关信息！</div>
		<div class="ul">
			<div class="li"><span>店铺名称：</span>{{ state.shopForm.shopName }}</div>
			<div class="li"><span>店铺用帐号：</span>{{ state.shopForm.userName }}</div>
			<div class="li"><span>联系人姓名：</span>{{ state.shopForm.connectName }}</div>
			<div class="li"><span>联系人电话：</span>{{ state.shopForm.connectPhone }}</div>
			<div class="li"><span>联系人邮箱：</span>{{ state.shopForm.userEmail }}</div>
		</div>
		<div class="close">
			<el-button type="primary" @click="registerCallback()">完成</el-button>
		</div>
	</div>
</template>

<script setup lang="ts" name="registerAccount">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useLoginApi } from '/@/api/login';
// 定义变量内容
const state = reactive({
	isShowPassword: false,
	shopForm: {
		userName: '',
		password: '',
		userEmail: '',
		shopName: '',
		schemeType: '',
		connectName: '',
		connectPhone: '',
		imgCode: '',
		sessionId: '',
		code: '',
		mark: '默认产品介绍,目前不填',
	},
	loading: {
		register: false,
	},
});
const emit = defineEmits(['tabLogin']);
const successShow = ref(false)
function registerCallback() {
	successShow.value = false
	emit('tabLogin', 'account')
}
import { ref } from 'vue'

const value = ref([])

const props = {
	expandTrigger: 'hover' as const,
}

const handleChange = (value: any) => {
	state.shopForm.schemeType = value[1];
}
const options = ref([]);
let optionsDefault = [];
async function getIndustryData() {
	const res = await useLoginApi().getIndustry({});

	let tmpindex = -1;
	for (var i in res.data) {
		const tmpdata = res.data[i];
		optionsDefault.push({
			"value": i,
			"label": i,
			"children": []
		})
		tmpindex++;
		tmpdata.map(v => {
			optionsDefault[tmpindex].children.push({ value: v.id, label: v.name, })
		})

	}
	options.value = optionsDefault.sort((a, b) => {
		if (a.value < b.value) {
			return -1;
		} else if (a.value > b.value) {
			return 1;
		} else {
			return 0;
		}
	});
}
getIndustryData();

const imgCode = ref('');
async function getImgCodeData() {
	const res = await useLoginApi().getImgCode({});
	if (res) {
		imgCode.value = res.data.base64;
		state.shopForm.sessionId = res.data.id;
	}

}
getImgCodeData();

const msg = ref('获取验证码');
const issending = ref(false);

async function getCodeFun() {
	if (issending.value) {
		return false;
	}

	if (!verifyPhone(state.shopForm.connectPhone)) {
		ElMessage('请输入正确的联系人电话')
		return false;
	}
	if (!state.shopForm.imgCode) {
		ElMessage('请输入正确的图片验证码')
		return false;
	}
	issending.value = true;
	let t = 60;
	const res = await useLoginApi().getSendCode({
		"phone": state.shopForm.connectPhone,
		"sessionId": state.shopForm.sessionId,
		"code": state.shopForm.imgCode
	});
	let timer = null;
	function waitTime() {
		clearInterval(timer);
		timer = setInterval(() => {
			t--;
			if (t <= 0) {
				clearInterval(timer);
				timer = null;
				msg.value = '获取验证码';
				t = 0;
				issending.value = false;
			} else {
				msg.value = t + 's后可以重新获取';
			}
		}, 1000);
	}
	if (res) {
		ElMessage('发送成功')
		waitTime();
		issending.value = true;
	} else {
		issending.value = false;
	}

}
// 登录
import {
	verifyPhone,
	verifyEmail,

} from '/@/utils/toolsValidate';
const onRegister = async () => {

	if (!state.shopForm.schemeType) {
		ElMessage('请选择行业选择')
		return false;
	}
	if (!state.shopForm.shopName) {
		ElMessage('请输入店铺名称')
		return false;
	}
	if (!state.shopForm.userName) {
		ElMessage('请输入店铺用账号')
		return false;
	}
	if (!state.shopForm.password) {
		ElMessage('请输入店铺用密码')
		return false;
	}
	if (!state.shopForm.connectName) {
		ElMessage('请输入联系人姓名')
		return false;
	}
	if (!verifyPhone(state.shopForm.connectPhone)) {
		ElMessage('请输入正确的联系人电话')
		return false;
	}
	if (!state.shopForm.imgCode) {
		ElMessage('请输入正确的图片验证码')
		return false;
	}
	if (!state.shopForm.code) {
		ElMessage('请输入正确的图片验证码')
		return false;
	}
	if (!verifyEmail(state.shopForm.userEmail)) {
		ElMessage('请输入正确的联系人邮箱')
		return false;
	}
	const res = await useLoginApi().registerShop(state.shopForm);
	if (res) {
		successShow.value = true;
	}
};
// 登录成功后的跳转

</script>

<style scoped lang="scss">
.register-content-form {
	margin-top: 20px;

	@for $i from 1 through 4 {
		.register-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
}

.select-height {
	height: 210px;
	margin: 0 auto 10px;
	overflow: auto;
	box-sizing: border-box;
	padding-right: 10px;

	:deep(.el-cascader--large) {
		width: 100%;
	}

	.left {
		line-height: 40px;
		height: 40px;
		margin-bottom: 10px;
	}
}

.register-content-submit {
	width: 100%;
	letter-spacing: 2px;
	font-weight: 300;
	margin-top: 12px;
}

@media screen and (max-width: 576px) {
	.select-height {
		height: auto;
	}
}

.get-code,
.img-code {
	justify-content: flex-end;
	width: 100%;
	display: flex;
}

// .img-code img{
// 	height: 100%;
//     width: 90%;
//     margin-left: 10%;
// 	display: block;
// }
.register-result {
	width: 100%;
	height: 103%;
	position: absolute;
	top: 0;
	left: 0;
	background: #ffffff;

	.title {
		width: 100%;
		height: 42px;
		line-height: 42px;
		text-align: center;
		font-size: 20px;
	}

	.title1 {
		width: 100%;
		line-height: 24px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}

	.ul {
		margin-bottom: 20px;
	}

	.li {
		width: 280px;
		height: 24px;
		overflow: hidden;
		line-height: 24px;
		margin: 0 auto;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.close {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
}
</style>
